<template>
  <div class="articles-container">
    <div class="app-container">
      <el-card>
        <el-row>
          <el-col :span="18">
            <!-- 搜索 -->
            <el-form :inline="true">
              <el-form-item label="关键字" style="padding-right:50px">
                <el-input v-model="formData.keyword" placeholder="请输入关键字" />
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="formData.state" placeholder="请选择">
                  <el-option label="已启用" :value="1" />
                  <el-option label="已禁止" :value="0" />
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-button @click="reset">清除</el-button>
                <el-button type="primary" @click="search">搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="6" style="text-align:right">
            <el-button icon="el-icon-edit" type="success" size="small" @click="openDialog">新增技巧</el-button>
          </el-col>
        </el-row>

        <!-- 数据记录 -->
        <el-alert
          :title="alertText"
          type="info"
          show-icon
        />

        <!-- 表格 -->
        <el-table
          :data="articles"
          style="width: 100%"
        >
          <el-table-column type="index" :index="indexMethod" label="序号" width="80" />
          <el-table-column label="文章标题" width="400">
            <template #default="{row}">
              <span>{{ row.title }}</span>
              <span
                v-if="row.videoURL"
                class="el-icon-film"
                @click="videoFrame(row.videoURL)"
              />
            </template>
          </el-table-column>
          <el-table-column label="阅读数">
            <template #default="{row}">
              <span>{{ row.visits }}</span>
            </template>
          </el-table-column>
          <el-table-column label="录入人">
            <template #default="{row}">
              <span>{{ row.username }}</span>
            </template>
          </el-table-column>
          <el-table-column label="录入时间" width="250">
            <template #default="{row}">
              <span>{{ row.createTime | parseTimeByString }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template #default="{row}">
              <span>{{ row.state===1? '已启用':'已禁止' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{row}">
              <el-button type="text" @click="acticleFrame(row)">预览</el-button>
              <el-button type="text" @click="toggle(row)">{{ row.state===1? '禁用':'启用' }}</el-button>
              <el-button type="text" :disabled="row.state===1" @click="handleClick(row)">修改</el-button>
              <el-button type="text" @click="delel(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->

        <el-pagination
          style="text-align:right;margin-top:20px"
          :current-page="formData.page"
          :page-sizes="[2, 4, 6, 8,10]"
          :page-size="formData.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />

      </el-card>

      <!-- //视频弹出框 -->
      <div class="videoFrame">
        <el-dialog :visible="showDialog" width="0" @close="closeVideo">
          <!-- //关闭按钮 -->
          <div class="close" @click="closeVideo">
            <span class="el-icon-close" />
          </div>
          <div class="box">
            <video
              ref="video"
              :src="videoURL"
              controls
              autoplay
              muted
              style="width:1200px;margin-left:-600px;margin-top:-200px"
            />
          </div>
        </el-dialog>
      </div>

      <!-- 预览弹出框 -->
      <articles-preview ref="articlesPreview" :curr-article="currArticle" />

      <!-- 新增技巧 -->
      <articles-add ref="addRef" :center-dialog-visible.sync="centerDialogVisible" :data-row="dataRow" @updateList="getArtList" />
    </div>
  </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/articles.js'
import ArticlesPreview from '../components/articles-preview.vue'
import ArticlesAdd from '../components/articles-add.vue'
export default {
  name: 'Articles',
  components: { ArticlesPreview, ArticlesAdd },
  data() {
    return {
      formData: {
        keyword: null,
        state: null,
        page: 1,
        pagesize: 10
      },
      articles: [],
      total: 0,
      videoURL: null,
      showDialog: false,
      dialogVisible: false,
      currArticle: {},
      alertText: '',
      centerDialogVisible: false,
      dataRow: {}
    }
  },
  created() {
    this.getArtList() // 获取表格数据
  },
  methods: {
    // 清楚
    reset() {
      this.formData = {
        keyword: null,
        state: null,
        page: 1,
        pagesize: 10
      }
    },
    // 搜索
    search() {
      this.formData.page = 1
      this.getArtList()
    },
    // 获取文章列表
    async getArtList() {
      // const res = await list(this.formData)
      // console.log(res)
      const { data: { counts, items, videoURL }} = await list(this.formData)
      // console.log(res)
      this.articles = items
      this.total = counts
      this.videoURL = videoURL
      this.alertText = `共 ${this.total} 条记录`
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.formData.pagesize = val
      this.formData.page = 1
      this.getArtList()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.formData.page = val
      this.getArtList()
    },
    indexMethod(index) {
      return index + 1 + this.formData.pagesize * (this.formData.page - 1)
    },
    // 视频框
    videoFrame(url) {
      this.showDialog = true
      console.log(url)
      this.videoURL = url
    },
    // 关闭视频框
    closeVideo() {
      this.showDialog = false
      this.videoURL = ''
    },

    // 预览
    acticleFrame(val) {
      this.currArticle = val
      this.$nextTick(() => {
        this.$refs.articlesPreview.open()
      })
    },
    // 禁用，启用切换
    async toggle(val) {
      await changeState({
        id: val.id,
        state: val.state === 1 ? 0 : 1
      })
      this.$message.success('操作成功')
      val.state = val.state === 1 ? 0 : 1
    },
    // 添加
    openDialog() {
      // console.log(111)
      this.centerDialogVisible = true
    },
    // 编辑
    handleClick(row) {
      // console.log(row)
      this.dataRow = row
      this.centerDialogVisible = true
      this.$nextTick(() => {
        this.$refs.addRef.handleOpen()
      })
    },
    // 删除
    delel(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await remove(row)
        console.log(res)
        // 提示用户
        this.$message.success('删除员工成功!!!')
        // 如果这个是最后一条数据 且 页码 > 1
        if (this.articles.length === 1 && this.formData.page > 1) {
          // 回到上一页
          this.formData.page--
        }
        this.getArtList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}

</script>

<style scoped lang='scss'>
.articles-container{
  .el-icon-film{
    color: #409eff;
  }
  .videoFrame{
    ::v-deep .el-dialog__header{
    display: none !important;;
  }
  }
  .close{
     width: 50px;
     height: 50px;
     border-radius: 50%;
     margin-bottom: 235px;
    background-color: rgba(0,0,0,.4);

     .el-icon-close{
       color:white;
       font-size: 30px;
       margin-left: 10px;
       margin-top: 10px;
      }
  }

}
</style>
